<template>
    <div class="registerOne">
        <div class="moduleHead">
            <router-link :to="{ name: 'home' }">
                <span class="back"></span>
            </router-link>
            <span>{{language.unify_welcome}}</span>
        </div>
        <div class="body">
            <div class="select_warapper">
                <div class="line_select_box">
                    <label>I am a </label>
                    <select v-model="gender" dir="rtl" @change="setMatchGender">
                        <option v-for="item in genderList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <div class="line_select_box">
                    <label>Seeking a</label>
                    <select v-model="match_gender" dir="rtl">
                        <option v-for="item in genderList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <!--  <div class="line_select_box">
                   <label>Age</label>
                   <select name="" id="">
                       <option value="1">Woman3</option>
                   </select>
                   <div class="select_text">18-59</div>
               </div> -->
            </div>
            <div class="button_warapper">
                <router-link :to="{ name: 'registerTwo' }">
                    <button class="btn btn_nextStep">
                        <loading :props="{show:loading,type:'btn'}"></loading>
                        {{language.unify_continue}}
                    </button>
                    <!-- <button class="btn btn_nextStep btn_disabled"> Continue </button> -->
                </router-link>
            </div>
            <div class="bottom_warapper">
                <router-link :to="{ name: 'login' }" class='main_color'> Already have an account? </router-link>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import loading from './Loading'

export default {
    name: 'registerOne',

    components: {
        loading,
    },

    data() {
        return {
            gender: 1,
            match_gender: 2,
            loading: false,
        }
    },

    created() {
        let regData = JSON.parse(Unit.getSessionStorage('ms_register_data')) || {};
        this.gender = regData.gender || 1;
        this.match_gender = regData.match_gender || 2;
    },

    computed: {

        genderList() {
            return JSON.parse(Unit.getLocalStorage('ms_gender'));
        }
    },

    methods: {
        setMatchGender(e) {
            switch (parseInt(e.target.value)) {
                case 1:
                    this.match_gender = 2;
                    break;
                case 2:
                    this.match_gender = 1;
                    break;
                case 16:
                    this.match_gender = 16;
                    break;
                case 32:
                    this.match_gender = 256;
                    break;
                case 256:
                    this.match_gender = 32;
                    break;
                case 64:
                    this.match_gender = 64;
                    break;
            }
        },
    },

    beforeRouteLeave(to, from, next) {
        let regData = JSON.parse(Unit.getSessionStorage('ms_register_data')) || {},
            tthis = this;
        if (to.name == 'registerTwo') {
            this.loading = true;
            regData.gender = this.gender;
            regData.match_gender = this.match_gender;
            Unit.setSessionStorage('ms_register_data', JSON.stringify(regData));
            setTimeout(function() {
                tthis.loading = false;
            }, 100)
        } else {
            Unit.removeSessionStoreage('ms_register_data');
        }

        next()
    }
}

</script>
<style scoped>
.registerOne {
    padding-top: 44px;
    background: #f7f7f7;
}

.registerOne .select_warapper {
    width: 100%;
    margin-top: 30px;
    background: #fff;
}

.registerOne .line_input_box:last-child,
.registerOne .line_select_box:last-child {
    border-bottom: none;
}

.registerOne .line_select_box,
.registerOne .line_input_box {
    position: relative;
    font-size: 15px;
    min-height: 48px;
    line-height: 48px;
    margin-left: 20px;
    color: #646464;
    border-bottom: 1px solid #e8e7e9;
    overflow: hidden;
}

.registerOne .line_input_box input {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% - 34px);
    padding-right: 34px;
    text-align: right;
    color: #282828;
    border: none;
    background: none;
    font-size: 16px;
}

.registerOne .line_select_box select {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 48px;
    color: #282828;
    text-align: right;
    border: none;
    background: none;
    padding-right: 28px;
}

.registerOne .line_select_box::after,
.registerOne .line_select_box::before {
    position: absolute;
    top: 50%;
    right: 13px;
    margin-top: -7px;
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #c7c7cc;
}

.registerOne .line_select_box::after {
    right: 15px;
    border-left-color: #fff;
}

.registerOne .button_warapper {
    padding: 44px;
    text-align: center;
}

.registerOne .button_warapper .btn_nextStep {
    width: 80%;
}

.registerOne .button_warapper .btn_disabled {
    background: #a5a5a5;
}

.registerOne .bottom_warapper {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
}

</style>
